今天來幫專案的Options API搬家到Vue3 Composition API

也來看看兩者的差異！

來幫Options API搬家囉!

Data

Options API

data() {
    return {
      d3Result: [],
      resData: [],
      africaCountries: [],
    } 
}

Composition API

const d3Result = reactive({value: []});
const resData = reactive([]);
const africaCountries = reactive({value: []});

Mounted

Options API

created() {
    this.$store.commit("setLoading", true);
//
}

Composition API 沒有created

onMounted(async () => {
  store.commit("setLoading", true)
  let africa = await getAfricaCountries();
  d3Result.value = africa;
  africaCountries.value = africa.features.map((i) => i.properties.name);
  await drawMap();
  store.commit('setLoading', false);
})

Functions

Option API

 methods: {
    drawMap() {
      var data = this.d3Result;

      const width = window.innerWidth * 0.7;
      const height = window.innerHeight * 0.6;
    //省略
    }

Composition API

function drawMap() {
  var data = d3Result.value;

  const width = window.innerWidth * 0.7;
  const height = window.innerHeight * 0.6;
  const svg = d3.select(".map");
  // 以下省略

}

function someRandom(){
...
}

Computed

Options API

computed: {
    isLoading() {
      return this.$store.state.isPageLoading;
    }
  },

Composition API

const isLoading = computed(() => {
  return state.isPageLoading;
});

const something = computed(()=>{
......})

以上!

本來想在原本的專案搬家，但之前根本沒有設定TS相關的東西，導致東缺一塊西缺一塊跑不動，
直接重新設定一個Nuxt專案了！

其實搬家過程感受滿大的就是，東西本來要被限制在一個區塊，譬如data(){} method{}
現在都可以自由移動了，也可以把要處理一樣邏輯的data和method和computed放在一起。

環遊非洲第28天-放棄自己國家貨幣的辛巴威

辛巴威位在南部非洲，境內有世界七大自然遺產之一、世界三大瀑布之一的維多利亞大瀑布。
從殖民國家奪回主權獨立時，曾名列非洲經濟前段班，被稱作非洲糧倉。
但辛巴威在2000年的土地改革，強制徵收了白人的土地給當地人，導致當地白人紛紛出走，帶走了資金更帶走了農業的技術。不僅受到西方國家的集體制裁，加上政府大量印鈔，導致通貨膨脹，甚至出現了面額100兆的紙鈔，打破金氏世界紀錄，那時人人都是百萬富翁，卻連馬鈴薯都買不起。通貨膨脹更是高達800%。
於是辛巴威政府在2009年廢除了辛巴威的貨幣，改為流通美元、歐元等9種貨幣。
在睽違了10年後於2019年終於再次發行了自己國家的貨幣，但因為民眾擔心過去的事情重演，加上進出口仍舊需要使用外幣，政府還是允許國外貨幣的流通。
至今辛巴威仍在經濟後段班，他激進的土地政策也成為了周邊非洲國家的借鏡。儘管再怎麼討厭白人，還是不敢貿然徵收土地。

但即使經濟落後，辛巴威人民的教育程度還是非洲有名，前總統穆加貝的土改政策雖然讓人詬病，但他主張「教育是人民的基本權利」，並大力推行12年義務教育政策，並且免學費。津巴布韋是非洲國家中國民受教育程度最高的國家之一，2015年成人識字率達到86.9%。

一百萬的鈔票啥也買不起。對了，蝦皮也買的到這一張喔。

圖片來源